<!DOCTYPE html>
<html>
<head>
<title>安全巡查路线</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=cR98TwX2FnKTpANIOYhMYMot9a4ioxjc"></script>
<script type="text/javascript" src="https://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<link rel="stylesheet" type="text/css" href="../../../date/css/pikaday.css"/>
<script type="text/javascript" src="../../../date/js/pikaday.min.js"></script>
</head>

            <div id="allmap"></div>
<body>
</body>
</html>
<script type="text/javascript">
    //百度地图API功能
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    var xhm=new XMLHttpRequest();
     xhm.open("GET","/shambles/baiduMap/getPosition.do",false);
 	 xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 	 xhm.send();
 	var json = JSON.parse(xhm.responseText);
	var point = new BMap.Point(json.lng, json.lat);
    map.centerAndZoom(point, 14);  // 初始化地图,设置中心点坐标和地图级别

    
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放      
	map.addControl(top_left_navigation); 
    
	//配置搜索
	var local = new BMap.LocalSearch(map,       
		{renderOptions: {map: map,autoViewport: false},pageCapacity: 1}      
	); 

	
	var openId;
	
	function menuControl(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(10, 25);
		}

	 var xhm=new XMLHttpRequest();
	 xhm.open("GET","/shambles/mobile/asset/getWetchatAllUsers.do",false);
	 xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	 xhm.send();
	 var users=JSON.parse(xhm.responseText);
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	menuControl.prototype = new BMap.Control();
	
	menuControl.prototype.initialize = function(map){
		 // 创建一个DOM元素
		  var div = document.createElement("div");
		  var span = document.createElement("span");
		  span.innerHTML="巡查人员 : ";
          div.appendChild(span);
		  // 创建一个DOM元素
		  var select = document.createElement("select");
		  select.setAttribute("id","select");
		  select.style.cssText = "width:90px;";
		  select.setAttribute("onchange","gradeChange()");
		  console.log(users);
		  var option = document.createElement("option");
		  select.appendChild(option);
		  for(var i=0;i<users.length;i++){
			  if(users[i].name!=""){
			  	var option = document.createElement("option");
			  	option.innerHTML=users[i].name;
			  	option.setAttribute("value",users[i].openId);
			  	select.appendChild(option);
			  }
		  }
		  user=users[0].name;
		  div.appendChild(select);
		  
		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
	
	
	 function gradeChange(){ 
	        var objS = document.getElementById("select"); 
	        var grade = objS.options[objS.selectedIndex].value; 
	        //console.log(objS.options[objS.selectedIndex]);
	        //alert(grade); 
	        map.clearOverlays();
	        console.log(grade);
	        openId=grade;
	        
	        checkMap();
	        
	       } 
	
	 
	 
	
	// 创建控件
	var menuCtrl = new menuControl();
	// 添加到地图当中
	map.addControl(menuCtrl);
	 
	 function menuControl1(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(200, 25);
		}
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	menuControl1.prototype = new BMap.Control();
	
	menuControl1.prototype.initialize = function(map){
		var div = document.createElement("div");
		
		 var select = document.createElement("select");
		 select.setAttribute("id","select1");
		 select.style.cssText = "width:80px;";
		 select.setAttribute("onchange","gradeChange1()");
		 
	       var v = document.createElement('option');  
	       v.setAttribute('value', 1);  
	       var inner = document.createTextNode("今天");   
	       v.appendChild(inner);  
	       
	       var v2 = document.createElement('option');  
	       v2.setAttribute('value', 2);  
	       var inner2 = document.createTextNode("一周内");   
	       v2.appendChild(inner2);  
	       
	       var v3 = document.createElement('option');  
	       v3.setAttribute('value', 3);  
	       var inner3 = document.createTextNode("一月内");   
	       v3.appendChild(inner3);  
	       
	       select.appendChild(v);  
	       select.appendChild(v2);  
	       select.appendChild(v3); 
	       
     	  div.appendChild(select);
      
		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
	
	function gradeChange1(){
		
        var objS = document.getElementById("select1"); 
        var grade = objS.options[objS.selectedIndex].value; 
        //console.log(objS.options[objS.selectedIndex]);
        //alert(grade); 
        map.clearOverlays();
        console.log(grade);
       
        var datepicker;
        var datepicker2

        if(grade==1){
        	
        	var Today=new Date();	    	
	    	datepicker=Today.getFullYear()+"-"+(Today.getMonth()+1)+"-"+(Today.getDate());	    	
	    	datepicker2=Today.getFullYear()+"-"+(Today.getMonth()+1)+"-"+(Today.getDate()+1);
	    	
	    	var picker = document.getElementById("datepicker"); 
	    	picker.value=datepicker;
	    	
	    	var picker2 = document.getElementById("datepicker2"); 
	    	picker2.value=datepicker2;

        }else if(grade==2){
        	
        	var Week=new Date();
        	datepicker=Week.getFullYear()+"-"+(Week.getMonth()+1)+"-"+(Week.getDate()-6);
	    	datepicker2=Week.getFullYear()+"-"+(Week.getMonth()+1)+"-"+(Week.getDate()+1);
	    	
	    	var picker = document.getElementById("datepicker"); 
	    	picker.value=datepicker;
	    	
	    	var picker2 = document.getElementById("datepicker2"); 
	    	picker2.value=datepicker2;
        
        }else if(grade==3){
        	
        	var Month=new Date();		       
	        datepicker=Month.getFullYear()+"-"+(Month.getMonth())+"-"+(Month.getDate());
	    	datepicker2=Month.getFullYear()+"-"+(Month.getMonth()+1)+"-"+(Month.getDate()+1);
	    	
	    	var picker = document.getElementById("datepicker"); 
	    	picker.value=datepicker;
	    	
	    	var picker2 = document.getElementById("datepicker2"); 
	    	picker2.value=datepicker2;
	    	
        }
        
        checkMap();

        
	}
	
	// 创建控件
	var menuCtrl1 = new menuControl1();
	// 添加到地图当中
	map.addControl(menuCtrl1);
	 
	 
	function menuControl2(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(10, 50);
		}
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	menuControl2.prototype = new BMap.Control();
	
	menuControl2.prototype.initialize = function(map){
		var div = document.createElement("div");
		  var span = document.createElement("span");
		  span.innerHTML="开始日期 : ";
      	 div.appendChild(span);
       
      	var input=document.createElement("input");
        input.setAttribute("id","datepicker");
        input.style.cssText = "width:70px;";
        div.appendChild(input);
      
        var picker=new Pikaday(
		 		    {
		 		        field: input
		 		    });

       
		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
	
	
	// 创建控件
	var menuCtrl2 = new menuControl2();
	// 添加到地图当中
	map.addControl(menuCtrl2);
		
	
	function menuControl3(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(200, 50);
		}
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	menuControl3.prototype = new BMap.Control();
	
	menuControl3.prototype.initialize = function(map){
			  
		  var div = document.createElement("div");
		  var span = document.createElement("span");
		  span.innerHTML="结束日期 : ";
          div.appendChild(span);
          
          var input=document.createElement("input");
          input.setAttribute("id","datepicker2");
          input.style.cssText = "width:70px;";
          div.appendChild(input);
          
          var picker2=new Pikaday(
		 		    {
		 		        field: input
		 		    });
          
		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
		
	
	// 创建控件
	var menuCtrl3 = new menuControl3();
	// 添加到地图当中
	map.addControl(menuCtrl3);
	
	function menuControl4(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(10, 80);
		}
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	menuControl4.prototype = new BMap.Control();
	
	menuControl4.prototype.initialize = function(map){
			  
		  var div = document.createElement("div");
		  var span = document.createElement("span");
		  span.innerHTML="巡查总数 : ";
        div.appendChild(span);
        
        var input=document.createElement("input");
        input.setAttribute("id","amount");
        input.setAttribute("readonly","readonly");
        input.style.cssText = "width:40px;";
        div.appendChild(input);

		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
		
	
	// 创建控件
	var menuCtrl4 = new menuControl4();
	// 添加到地图当中
	map.addControl(menuCtrl4);
	
	function buttonControl(){
		  // 默认停靠位置和偏移量
		  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
		  this.defaultOffset = new BMap.Size(150, 80);
		}
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	buttonControl.prototype = new BMap.Control();
	
	buttonControl.prototype.initialize = function(map){
		
		 var div = document.createElement("div");
          var button = document.createElement("button");
          button.innerHTML=" 查    询 ";
	      div.appendChild(button);
                  
          div.onclick=function(){        	 
        	 			 checkMap();
          				}
	      
		  map.getContainer().appendChild(div);
		  // 将DOM元素返回
		  return div;
	}
		
	
	// 创建控件
	var buttonCtrl = new buttonControl();
	// 添加到地图当中
	map.addControl(buttonCtrl);
	
	
	function checkMap(){
		var datepicker=document.getElementById('datepicker').value;
  	   var datepicker2=document.getElementById('datepicker2').value;
		var xhm=new XMLHttpRequest();
		    xhm.open("GET","/shambles/baiduMap/getAllCheckByOpenId.do?openId="+openId+"&datepicker="+datepicker+"&datepicker2="+datepicker2,false);
	    	xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    	xhm.send();
	    	var ticket=JSON.parse(xhm.responseText);
	    	
	    	console.log(ticket);
	        addDeck(ticket);
	}
	

	  /*  
	    var xhm=new XMLHttpRequest();
	    xhm.open("GET","../baiduMap/get.do",false);
	    xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	    xhm.send();
	    var ticket=JSON.parse(xhm.responseText);
	    
	 addDeck(ticket);
	 */
	 
	 function addDeck(text){	

		  map.clearOverlays();
		  
			 var ticket=text.rows;
			 var total=text.total;
			 
			 
			 var amount = document.getElementById("amount"); 
			 amount.value="  "+total+"处";		 
			
	   		// console.log(ticket);
	    	var json_data = new Array();
	    
	    	var point = new BMap.Point(ticket[0].lng, ticket[0].lat);
	    	
	    	var pois=[];

	    	var n=300;
	    	
	    	if(ticket.length<300){
	    		n=ticket.length;
	    	}
	    	
	    	for(var i=0;i<n;i++){

	    		pois.push(new BMap.Point(ticket[i].lng,ticket[i].lat));

	    	}
	    
	    	var points = [];  // 添加海量点数据
	    	
	    	for(var i=0;i<ticket.length;i++){
	    		
	    		points.push(new BMap.Point(ticket[i].lng, ticket[i].lat));
	    		
	    	}
	    	
	    	
	       //console.log(pois);
	    
	    	var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
	    	    scale: 0.6,//图标缩放大小
	    	    strokeColor:'#fff',//设置矢量图标的线填充颜色
	    	    strokeWeight: '3',//设置线宽
	    	});
	    	var icons = new BMap.IconSequence(sy, '10', '30');
	    	
	    	var polyline =new BMap.Polyline(pois, {
	    		   enableEditing: false,//是否启用线编辑，默认为false
	    		   enableClicking: true,//是否响应点击事件，默认为true
	    		   icons:[icons],
	    		   strokeWeight:'6',//折线的宽度，以像素为单位
	    		   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
	    		   strokeColor:"#18a45b" //折线颜色
	    		});

	    	try{
	    	 map.addOverlay(polyline);          //增加折线
	    	}catch(err){
	    		console.log(err);
	    	}
	    	
			var pointArray = new Array();

			/*
			for(var i=0;i<ticket.length;i++){
				var point=new BMap.Point(ticket[i].lng, ticket[i].lat);
				var myIcon = new BMap.Icon("../img/checkPoint.png", new BMap.Size(20,19));
				var marker = new BMap.Marker(point,{icon:myIcon}); // 创建点
				map.addOverlay(marker);    //增加点
				
				var content="巡查资产 : "+ticket[i].address+"<br/>"+
				            " 管理分区 : "+ticket[i].manageRegion+" "+
				            " 检查结果 : "+ticket[i].check_name+" "+
				            " 检查时间 : "+actionTime(ticket[i].date);
			  if(showLable==1){		   //是否显示文字标注
					var str = actionTime(ticket[i].date);
					var opts = {
					  	 position : point,    // 指定文本标注所在的地理位置
					  	 offset   : new BMap.Size(-getByteLen(str)*3, 5)    //设置文本偏移量
						}	
					console.log(getByteLen(str));
					var label = new BMap.Label(str, opts);  // 创建文本标注对象
					label.setStyle({
							 color : "bule",
							 fontSize : "12px",
							 height : "20px",
							 lineHeight : "20px",
							 fontFamily:"微软雅黑"
						  });
		    		map.addOverlay(label);   
				//marker.addEventListener("click",attribute);
			  }
		    	addClickHandler(content,marker);
			}
			*/
			
			var options = {
		             size: BMAP_POINT_SIZE_SMALL,
		             color: 'red'
		         }
			
		    var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

		    pointCollection.addEventListener('click', function (e) {
		          // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
		          		var xhm=new XMLHttpRequest();
		  				 xhm.open("GET","/shambles/baiduMap/getCheckByPosition.do?lng="+e.point.lng+"&lat="+e.point.lat+
		  						 "&openId="+openId,false);
		  				 xhm.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		  				 xhm.send();
		   				var obj=JSON.parse(xhm.responseText);
		   				console.log(obj);
		   				var content="巡查资产 : "+obj.address+"<br/>"+
			            			" 管理分区 : "+obj.manageRegion+" "+
			            			" 检查结果 : "+obj.check_name+" <br />"+
			            			" 检查时间 : "+actionTime(obj.date);
		    				var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
		    	            map.openInfoWindow(infoWindow,new BMap.Point(e.point.lng, e.point.lat)); //开启信息窗口
		    	       	
		         });
		         map.addOverlay(pointCollection);  // 添加Overlay
			
			
			//让所有点在视野范围内
			map.setViewport(pointArray);
		
		}
	
	 function addClickHandler(content,marker){
			marker.addEventListener("click",function(e){
				openInfo(content,e)}
			);
		}
	 
	 var opts = {
				width : 250,     // 信息窗口宽度
				height: 120,     // 信息窗口高度
				title : "安全巡查详情" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	 
	 function openInfo(content,e){
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		}
	 
	//获取覆盖物位置
	function attribute(e){
		var p = e.target;
		var value=new Object();
        value.lng=p.getPosition().lng;
        value.lat=p.getPosition().lat;
        var json = JSON.stringify(value); 
        alert(json);  
	}	

    
	function getByteLen(val) {    //传入一个字符串
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 
                len += 2; //如果是全角，占用两个字节  如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
            else
                len += 1; //半角占用一个字节
        }
        return len;
     }       
   
	function actionTime(value){
  	    var date = new Date(value); 
  	    Y = date.getFullYear() + '年';
  	    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
  	    D = date.getDate() + '日 ';
  	    h = date.getHours() + ':';
  	    m = date.getMinutes() + ':';
  	    s = date.getSeconds(); 
  		return Y+M+D+h+m+s;
  	}
	
</script>